<script setup lang="ts">
import mapJson from './jiaxing1.json'
import { onBeforeUnmount, onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import html2canvas from 'html2canvas'
import { GeoJSONSourceInput } from 'echarts/types/src/coord/geo/geoTypes'
import { Region, Scatter } from '@/entity/deviceIndexMap'
import img from '@/assets/deviceImages/fw2.png'
import icon1 from '@/assets/deviceImages/01.png'
import icon2 from '@/assets/deviceImages/02.png'
import icon3 from '@/assets/deviceImages/03.png'
import messageImg from '@/assets/deviceImages/message.png'

const container = ref<HTMLElement | null>(null)
let myCharts: echarts.ECharts | null = null
const iconImg = ['image://' + icon1, 'image://' + icon2, 'image://' + icon3]
// const container = ref<HTMLImageElement>()
type EchartsType = echarts.EChartsType
// let myCharts: EchartsType | null = null
let regionData: Region[] = []
let scatterData: Scatter[] = []
const dataMap = new Map()

onMounted(() => {
	initMap()
})

onBeforeUnmount(() => {
	if (myCharts) {
		myCharts.dispose()
		window.removeEventListener('resize', handleResize)
	}
})
const initMap = () => {
	if (container.value) {
		//echarts初始化
		myCharts = echarts.init(container.value)
		//显示加载动画效果，可以在加载数据前手动调用
		myCharts.showLoading('default', {
			text: '统计中，请稍后...',
			maskColor: '#2957a2',
			textColor: '#fff'
		})
		//注册地图 geojson
		// echarts.registerMap('jiaxing', mapJson.data as GeoJSONSourceInput)
		echarts.registerMap('jiaxing', mapJson as GeoJSONSourceInput)
		//隐藏加载动画效果
		myCharts.hideLoading()
		//初始化数据
		setOptions()
		//echarts地图适配
		window.addEventListener('resize', handleResize)
		myCharts.on('georoam', handleGeoRoam)
	}
}
const handleResize = () => {
	if (myCharts) {
		myCharts.resize()
	}
}

const handleGeoRoam = (params: any) => {
	if (myCharts && container.value) {
		const option = myCharts.getOption()
		const geoOption = option.geo as { map: string; zoom?: number; center?: number[] }[] | undefined // 断言类型
		if (geoOption) {
			if (params.zoom != null && params.zoom != undefined) {
				geoOption[0].zoom = geoOption[1].zoom
				geoOption[0].center = geoOption[1].center
			} else {
				geoOption[0].center = geoOption[1].center
			}
			myCharts.setOption(option)
		}
	}
}

const effectScatterColor = [
	new echarts.graphic.LinearGradient(1, 0, 0, 0, [
		{
			offset: 0,
			color: 'rgba(150, 144, 194, 1)'
		},
		{
			offset: 1,
			color: 'rgba(150, 144, 194, 0.5)'
		}
	]),
	new echarts.graphic.LinearGradient(1, 0, 0, 0, [
		{
			offset: 0,
			color: 'rgba(141, 165, 206, 1)'
		},
		{
			offset: 1,
			color: 'rgba(141, 165, 206, 0.5)'
		}
	]),
	new echarts.graphic.LinearGradient(1, 0, 0, 0, [
		{
			offset: 0,
			color: 'rgba(192, 157, 168, 1)'
		},
		{
			offset: 1,
			color: 'rgba(192, 157, 168, 0.5)'
		}
	])
]

const setOptions = () => {
	if (mapJson) {
		mapJson.features.forEach(item => {
			const { name, center, centericon, gridLevel } = item.properties
			dataMap.set(name, center)
			scatterData.push({
				name: name,
				value: [centericon[0], centericon[1] - 0.01],
				gridLevel: gridLevel,
				img: iconImg[gridLevel - 1]
			})
		})
	}
	const options = {
		color: ['#736BCB', '#736BCB'],
		legend: {
			align: 'right',
			right: '3%',
			bottom: '30%',
			itemHeight: 20,
			itemWidth: 20,
			itemGap: 0,
			orient: 'vertical',
			data: [
				{
					name: '设备在线占比',
					textStyle: {
						fontSize: 16,
						color: '#000',
						padding: [0, 0, 0, 1]
					},
					icon: 'circle'
				}
			]
		},
		geo: [
			{
				map: 'jiaxing',
				aspectScale: 0.75,
				layoutCenter: ['75%', '40%'],
				// regions: regionData,
				animationDurationUpdate: 0,
				roam: true,
				label: {
					show: true,
					color: '#fff',
					// offset: [-10, -10],
					fontSize: 12
				},
				// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
				layoutSize: '75%',
				itemStyle: {
					borderColor: '#000',
					borderWidth: 0,
					opacity: 1,
					shadowBlur: 20,
					shadowColor: 'rgba(156, 148, 239, 1)',
					shadowOffsetX: 0,
					shadowOffsetY: 0,
					areaColor: {
						image: img,
						repeat: 'repeat'
					}
				},
				emphasis: {
					disabled: 'true'
					// itemStyle: {
					// 	color: 'transparent0'
					// },
					// label: {
					// 	color: '#fff'
					// }
				},
				z: 1
			},
			{
				map: 'jiaxing',
				aspectScale: 0.75,
				layoutCenter: ['75%', '40%'],
				// regions: regionData,
				animationDurationUpdate: 0,
				roam: true,
				label: {
					show: true,
					color: '#fff',
					// offset: [-10, -10],
					fontSize: 12
				},
				// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
				layoutSize: '75%',
				itemStyle: {
					borderColor: '#000',
					borderWidth: 0,
					opacity: 1,
					areaColor: {
						image: img,
						repeat: 'repeat'
					}
				},
				emphasis: {
					disabled: 'true'
					// itemStyle: {
					// 	color: 'transparent0'
					// },
					// label: {
					// 	color: '#000'
					// }
				},
				z: 2
			}
		],
		series: [
			//下方标点
			{
				type: 'scatter',
				coordinateSystem: 'geo',
				symbol: (value: string, params: { data: { img: string } }) => {
					// console.log('scatter===========', value, params)
					return params.data.img
				},
				symbolSize: [30, 15],
				symbolOffset: [0, 0],
				data: scatterData,
				z: 2
			},
			//涟漪
			{
				type: 'effectScatter',
				coordinateSystem: 'geo',
				rippleEffect: {
					//最大缩放比例
					scale: 8,
					//绘制方式 stroke fill
					brushType: 'fill'
				},
				//配置何时显示特效
				//render emphasis
				showEffectOn: 'render',
				itemStyle: {
					color: (params: { data: { gridLevel: number } }) => {
						return effectScatterColor[params.data.gridLevel - 1]
					}
				},
				symbol: 'circle',
				symbolSize: [10, 5],
				symbolOffset: [0, 0],
				data: scatterData,
				z: 2
			},
			//信息框c
			{
				name: '设备在线占比',
				type: 'scatter',
				coordinateSystem: 'geo',
				label: {
					show: true,
					formatter: (params: { data: { name: string; gridLevel: number } }) => {
						const { name } = params.data
						const onlineRate = '设备在线率'
						const onlineRatePercentage = '87%'
						// return '{a|' + '党员人数:' + params.data.name + '}' + '\n' + '{a|' + '户籍人数:' + params.data.name + '}'
						var res = ''
						if (params.data.gridLevel == 1) {
							res += `{img1|${name}}` + `   {text|${onlineRate}}` + `\n                  {num|${onlineRatePercentage}}`
						} else if (params.data.gridLevel == 2) {
							res += `{img2|${name}}` + `   {text|${onlineRate}}` + `\n                  {num|${onlineRatePercentage}}`
						} else {
							res += `{img3|${name}}` + `   {text|${onlineRate}}` + `\n                  {num|${onlineRatePercentage}}`
						}
						return res
					},
					rich: {
						//不要修改，不然后悔
						text: {
							color: '#908FA3',
							fontSize: 16,
							padding: [-30, 0, 0, 0]
						},
						num: {
							fontSize: 22,
							padding: [-30, 0, 0, 0],
							color: '#4D4A71'
						},
						img1: {
							backgroundColor: '#9C94EF',
							borderRadius: 10,
							color: '#fff',
							fontSize: 20,
							verticalAlign: 'bottom',
							align: 'center',
							padding: [14, 6, 14, 6]
							// height: 0
						},
						img2: {
							backgroundColor: '#7EC6F9',
							borderRadius: 10,
							color: '#fff',
							fontSize: 20,
							padding: [14, 6, 14, 6]
						},
						img3: {
							backgroundColor: '#EF956F',
							borderRadius: 10,
							color: '#fff',
							fontSize: 20,
							padding: [14, 6, 14, 6]
						}
					}
					// rich: {
					// 	a: {
					// 		color: '#000',
					// 		fontSize: 16,
					// 		lineHeight: 25
					// 	}
					// }
				},
				itemStyle: {
					opacity: 1,
					shadowBlur: 30,
					shadowColor: 'rgba(156, 148, 239, 1)',
					shadowOffsetX: 0,
					shadowOffsetY: 10
				},
				symbol: 'image://' + messageImg,
				symbolSize: [170, 90],
				symbolOffset: [0, -45],
				rendering: 'auto',
				data: scatterData,
				z: 2
			}
		]
	}
	myCharts?.setOption(options)
}
</script>

<template>
	<div id="container" ref="container"></div>
	<div id="draggableDiv"></div>
</template>

<style scoped lang="scss">
#container {
	width: 100%;
	height: 100%;
	//background-color: rgba(112, 211, 331, 0.5);
	position: absolute;
	z-index: 1;
	top: 0px;
}
</style>
